<template>
  <div class="mvlist">
    <div class="musicListNavBar">
      <!-- 地区 -->
      <div class="selectorItem">
        <div class="title">地区：</div>
        <second-bar
          :SecondNavBarData="areaList"
          class="second-bar"
          @clickSecondBarItem="areaItem"
        ></second-bar>
      </div>
      <!--  类型 -->
      <div class="selectorItem">
        <div class="title">类型：</div>
        <second-bar
          :SecondNavBarData="typeList"
          class="second-bar"
          @clickSecondBarItem="typeItem"
        ></second-bar>
      </div>
      <!-- 排序 -->
      <div class="selectorItem">
        <div class="title">排序：</div>
        <second-bar
          :SecondNavBarData="orderList"
          class="second-bar"
          @clickSecondBarItem="orderItem"
        ></second-bar>
      </div>
    </div>
    <!-- 视频卡片区域 -->
    <div class="videocardlist">
      <video-list
        :videomv="mvList"
        @clickListItem="goToMvDetail"
        @videoLoading="load"
        :isLoad="t"
      ></video-list>
    </div>
  </div>
</template>

<script>
import SecondBar from "../../../components/secondnavbar/SecondBar.vue";
import VideoList from "../../../components/video/VideoList.vue";
export default {
  components: { SecondBar, VideoList },
  name: "Mvlist",

  data() {
    return {
      // mv 地区
      areaList: [
        { name: "全部", path: "" },
        { name: "内地", path: "内地" },
        { name: "港台", path: "港台" },
        { name: "欧美", path: "欧美" },
        { name: "日本", path: "日本" },
        { name: "韩国", path: "韩国" },
      ],
      // mv 类型
      typeList: [
        { name: "全部", path: "" },
        { name: "官方版", path: "官方版" },
        { name: "原生", path: "原生" },
        { name: "现场版", path: "现场版" },
        { name: "网易出品", path: "网易出品" },
      ],
      // 排序
      orderList: [
        { name: "上升最快", path: "" },
        { name: "最热", path: "最热" },
        { name: "最新", path: "最新" },
      ],
      // 当前地区
      area: "",
      // 当前类型
      type: "",
      // 当前排序
      order: "",
      // 当前视频页数
      mvPage: 1,
      // 视频列表数据
      mvList: [],
      hasMore: false,
    };
  },

  created() {
    this.getMvList();
  },

  methods: {
    // 获取全部mv
    async getMvList() {
      const { data: res } = await this.$http("mv/all", {
        params: {
          area: this.area,
          tpye: this.type,
          order: this.order,
          limit: 32,
          offset: 32 * (this.mvPage - 1),
        },
      });
      // console.log(res.data);
      this.hasMore = res.hasMore;

      this.mvList.push(...res.data);
    },
    // 点击地区回调
    areaItem(index) {
      this.area = this.areaList[index].path;
      this.mvList = [];
      this.mvPage = 1;
      this.getMvList();
    },
    // 点击类型回调
    typeItem(index) {
      this.tpye = this.typeList[index].path;
      this.mvList = [];
      this.mvPage = 1;
      this.getMvList();
    },
    // 点击排序回调
    orderItem(index) {
      this.order = this.orderList[index].path;
      this.mvList = [];
      this.mvPage = 1;
      this.getMvList();
    },
    // 无限加载
    load() {
      if (this.hasMore) {
        this.mvPage += 1;
        this.getMvList();
      }
    },
    // 点击mv封面回调
    // 进入视频详情页
    goToMvDetail(id) {
      //  console.log(id);
      this.$router.push({
        name: "videodetail",
        params: { id: id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mvlist {
  width: 100%;
  height: 100%;
}

.selectorItem {
  display: flex;
}
.title {
  font-size: 13px;
  width: 40px;
  line-height: 28px;
}
.second-bar {
  padding: 0 10px;
}
</style>